<template>
  <div class="record-zoom-card">
    <div
      class="title"
      v-if="needTitle"
      @click="showOrnot">
      <div class="base-info">
        <p>
          <span>出库时间：{{ cardData.operationRecord.outStockTime }}</span>
          <span>出库操作人：{{ cardData.operationRecord.outStockOperName }}</span>
        </p>
      </div>
      <div class="ops">
        <!-- <el-button
          type="text"
          @click="printOrder">打印随货同行单</el-button> -->
      </div>
    </div>
    <div
      class="list"
      v-show="showCard">
      <el-editable
        class="record-card-list"
        :data="cardData.detailList"
        height="200"
        :columns="cardColumns">
        <template
          slot="default-placeholder"
          slot-scope="scope">
          <el-editable
            class="record-card-son-list"
            :data="scope.row.historyInfoList"
            height="200"
            :columns="cardSonColumns"
          />
        </template>
      </el-editable>
    </div>
  </div>
</template>
<script>
import ElEditable from '@components/el-editable'
import { cloneDeep } from 'lodash'
export default {
  name: 'RecordZoomCard',
  components: { ElEditable },
  data () {
    return {
      showCard: this.showList,
      reCardColumns: []
    }
  },
  props: {
    cardColumns: {
      type: Array,
      default: () => []
    },
    cardSonColumns: {
      type: Array,
      default: () => []
    },
    cardData: {
      type: Object,
      default: () => {}
    },
    needTitle: {
      type: Boolean,
      default: true
    },
    showList: {
      type: Boolean,
      default: false
    },
    cardSonData: {
      type: Array,
      default: () => []
    },
    curListInfo: {
      type: Object,
      default: () => {}
    }
  },
  mounted () {
    this.reInitColumns()
  },
  methods: {
    // 如果没有子数据则不显示更多的按钮
    reInitColumns () {

    },
    printOrder () {
      this.$emit('peerOrderList')
    },
    // 缩放
    showOrnot () {
      this.showCard = !this.showCard
    }
  }
}
</script>
<style lang="less">
.record-zoom-card {
  .title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #b4b7bd;
    background: #eceef3;
    margin-top: 10px;

    &:hover {
      cursor: pointer;
    }
  }
}
</style>
